<div class="mapContainer traffic-situation">
    <itmp-ol-map #map (ready)="onReady($event)" [mapSize]="mapStyle" [mapOption]="mapOptions"></itmp-ol-map>
    <div class="btnGroup">
        <span id="largeZoom" (click)="toLargeZoom()">+</span>
        <span id="smallZoom" (click)="toSmallZoom()">-</span>
        <span (click)="geolocation()"><i class="iconfont icon-dingwei1"></i></span>
    </div>
    <!--<div class="legendsContainer">
        <div class="header"> {{'Data_Visualization.TrafficSituation.Legends' | translate}}</div>
        <ul class="lengends">
            <li *ngFor="let item of legends">
                <i class="{{item.status}}"></i>
                <span>{{'Data_Visualization.TrafficSituation.'+item.value | translate}}</span>
            </li>
        </ul>
    </div>-->
    <nz-dropdown [nzPlacement]="'topCenter'" nzTrigger="click">
        <button class="legendsContainer" nz-button nz-dropdown>{{'Data_Visualization.TrafficSituation.Legends' | translate}}</button>
        <ul nz-menu>
            <li class="overall-btn-legend" nz-menu-item *ngFor="let item of legends">
                <i class="legend-item-line" [ngClass]="[item.status, 'traffic-situation']"></i>
                <span>{{'Data_Visualization.TrafficSituation.'+item.value | translate}}</span>
            </li>
        </ul>
    </nz-dropdown>
</div>
